<div id="user-toolbar">
    <div class="wu-toolbar-button">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openUserAdd()" plain="true">添加</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openUserEdit()" plain="true">修改</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="removeUser()" plain="true">删除</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="cancel()" plain="true">取消</a>
    </div>
    <div class="wu-toolbar-search">
        <label>起始时间：</label><input class="easyui-datebox" style="width:100px">
        <label>结束时间：</label><input class="easyui-datebox" style="width:100px">
        <label>用户组：</label> 
        <select class="easyui-combobox" panelHeight="auto" style="width:100px">
            <option value="0">选择用户组</option>
            <option value="1">黄钻</option>
            <option value="2">红钻</option>
            <option value="3">蓝钻</option>
        </select>
        <label>关键词：</label><input class="wu-text" style="width:100px">
        <a href="#" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>
    </div>
</div>

<div id="user-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
	<form id="user-form" method="post">
        <table>
            <tr>
                <td width="60" align="right">姓 名:</td>
                <td><input type="text" name="name" class="wu-text" /></td>
            </tr>
            <tr>
                <td align="right">邮 箱:</td>
                <td><input type="text" name="email" class="wu-text" /></td>
            </tr>
            <tr>
                <td align="right">主 题:</td>
                <td><input type="text" name="subject" class="wu-text" /></td>
            </tr>
            <tr>
                <td valign="top" align="right">内 容:</td>
                <td><textarea name="content" rows="6" class="wu-textarea" style="width:260px"></textarea></td>
            </tr>
        </table>
    </form>
</div>

<table id="user-datagrid"></table>

<script type="text/javascript">
	var nodeId = null;
	$('#user-datagrid').datagrid({
	    url:'http://localhost:3000/users/list',
	    fit:true,
	    pagination:true,
	    pageSize:2,
	    pageList:[2,4,6,8,10],
	    toolbar:'#user-toolbar',
	    columns:[[
	        {field:'name',title:'姓名',width:150},
	        {field:'email',title:'邮箱',width:150},
	        {field:'title',title:'主题',width:150},
	        {field:'operate',title:'管理',width:150,
	        	formatter:function(value,row,index){
//	        		console.log(row);
//	        		return '<a href="javascript:void(0)" onclick="deleteUser('+row._id+')">'+'删除</a>';
//	        		return "<a href="javascript:void(0)' onclick='deleteUser("'+row._id+'")">删除</a>";
//	        		return "<a href='javascript:void(0)' onclick='deleteUser('"+row._id+"')'>删除</a>";
	        		return '<a href="javascript:void(0)" onclick="deleteUser(\''+ row._id+'\')">删除</a>'
	        		+'<a href="javascript:void(0)" onclick="updateUser(\''+ row._id+'\')">/修改</a>';
	        	}
	        }
	    ]]
	});
	
	//添加弹窗
	function openUserAdd(){
		$('#user-form').form('clear');
		$('#user-dialog').dialog({
			closed: false,
			modal:true,
            title: "添加信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: userAddAction 
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#user-dialog').dialog('close');                    
                }
            }]
        });
	}
	//添加确定
	function userAddAction(){
		console.log($("#user-form").serializeJSON());
		if($(this).form('enableValidation').form('validate')){
			$.ajax({
				type:"post",
				url:"http://localhost:3000/users/data",
				data:$("#user-form").serializeJSON()
			}).then(function(res){
//				console.log(res);
			});
		}else{
			alert('no');
		}
	}
	//删除
	function deleteUser(id){		
		$.ajax({
			type:"delete",
			url:"http://localhost:3000/users/data/"+id
		}).then(function(res){
			$('#user-datagrid').datagrid('reload');
		});
	}
	//修改
	function updateUser(id){
		nodeId = id;
		$('#user-dialog').dialog({
			closed: false,
			modal:true,
            title: "修改信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: userupdateAction
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#user-dialog').dialog('close');                    
                }
            }]
        });
	}
	//修改确定
	function userupdateAction(id){
		if($(this).form('enableValidation').form('validate')){
			$.ajax({
				type:"post",
				url:"http://localhost:3000/users/data/"+nodeId,
				data:$('#user-form').serializeJSON()
			}).then(function(res){
				$('#user-dialog').dialog('close'); 
				$('#user-datagrid').datagrid('reload');
			});
		}else{
			alert('no');
		}
	}
	
</script>